import { memo } from 'react';
import { Link } from 'react-router-dom';
import './ArticleItem.less';

const ArticleItem = memo((props) => {
  const { item = {} } = props;
  return (
    <div className="article-item  box-sizing">
      <Link to={`/detail/${item.id}`} className="item-link flex">
        <div className="item-desc">
          <div className="item-title bold">{item.title}</div>
          <div className="item-author">{item.hint}</div>
        </div>
        <div className="item-img">
          <img src={item?.images?.[0] ?? ''} alt={item.title} />
        </div>
      </Link>
    </div>
  );
});

export default ArticleItem;
